<template>
    <div class="forumPart">
        <div class="TopPart">
            <div>相关论坛</div>
        </div>
        <div style="margin-top: 15px" v-for="content in forumList">
            <div style="display: flex">
                <img class="userPicture" :src="content.avatar">
                <div class="UserMessage">
                    <div>{{ content.username }}</div>
                    <div>{{ content.createTime }}</div>
                </div>
            </div>
            <div class="Content">{{ content.content }}</div>
            <div style="display: flex">
                <img class="ForumImg" v-for="item in getValidImageUrls(content.imageUrl)" :src="item">
            </div>
            <div class="caozuo">
                <i @click="" class="iconfont icon-pinglunxiao" id="ii"></i>
                <div class="Num">{{ content.commentCount }}</div>
                <i style="cursor: pointer" class="iconfont icon-iconfontzhizuobiaozhun023148" id="ii"></i>
                <div class="Num">{{ content.praise }}</div>
            </div>
        </div>
        <div class="MoreForums" v-if="forumList.length === 3">
            <div>前往论坛</div>
            <i @click="" class="iconfont icon-sangejiantou" id=""></i>
        </div>
    </div>
</template>

<script setup>
import { getSearchForumApi } from "@/api/stock";
import { number } from "echarts";
import { onMounted, ref } from "vue";

const props = defineProps({
    stockId: number
})

const { stockId } = props


const forumList = ref([])

const getForumList = () => {
    getSearchForumApi(stockId).then(res => {
        forumList.value = res
    })
}

// 于获取有效的图片地址数组
const getValidImageUrls = (imageUrl) => {
    if (!imageUrl) return [];
    const urls = imageUrl.split('||');
    return urls.filter(url => url.trim() !== '');
};

onMounted(() => {
    getForumList()
})

</script>

<style scoped>
.forumPart {
    background: white;
    width: 100%;
    border-radius: 52px;
    margin-top: 18px;
}

.TopPart {
    border-bottom: 1px solid #b3acac;
    padding-bottom: 13px;
    margin-top: 9px;
}

.TopPart div {
    border-left: 7px solid #3377ff;
    padding-left: 16px;
    font-size: 16px;
    font-weight: 800;
}

.userPicture {
    width: 50px;
    height: 50px;
    border-radius: 36px;
}

.UserMessage {
    margin-left: 17px;
}

.UserMessage div:nth-child(1) {
    font-size: 18px;
    margin-top: 8px;
}

.UserMessage :nth-child(2) {
    font-size: 13px;
    color: #878787;
    margin-top: 6px;
}

.Content {
    text-indent: 2em;
    font-size: 18px;
    margin-top: 16px;
    margin-bottom: 22px;
}

.ForumImg {
    width: 250px;
    height: 250px;
    margin-left: 36px;
}

.caozuo {
    margin-top: 16px;
    padding-left: 35px;
    display: flex;
}

#ii {
    font-size: 25px;
    margin-right: 12px;
}

.Num {
    margin-right: 15px;
    font-size: 19px;
}

.MoreForums {
    margin-top: 40px;
    display: flex;
    padding-bottom: 20px;
}

.MoreForums div:nth-child(1) {
    color: #3377ff;
    font-size: 19px;
    font-weight: 800;
    margin-left: 85%;
}

.MoreForums i {
    font-size: 28px;
    color: #3377ff;
    margin-left: 5px;
}
</style>